<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>表单页面</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
</head>

<body>
    <form class="layui-form " action="" lay-filter="layui-form" id="formId">
        <div class="mainBox">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" value="{$msg.name|default=''}" lay-verify="name" autocomplete="off"
                            placeholder="请输入角色名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限选择</label>
                    <div class="layui-input-block">
                    <table class="layui-table" style="width:100%;">
        
          <thead>
           <tr>
            <th>
                 <input type="checkbox"  lay-filter="checkall" class="itemClasscheckT itemxzClasswz_qx" title="操作全选" lay-skin="primary" >
            </th>
           </tr>
           
          </thead>
          <tbody >
                {volist name="lse" id="vo"}
                    <tr>
                        <th>
                           <input type="checkbox" {if in_array($vo.id,$limits)} checked {/if} name="operate_id[]" lay-filter="checkTest1"   class="itemClasscheck itemClasscheck_item{$vo.id} itemClasscheck_1" data-id="{$vo.id}" value="{$vo.id}" title="{$vo.title}" lay-skin="primary" >
                        </th>
                    </tr>
                    <tr>
                        <td style="padding-left:50px;">
                          {volist name="$vo.limits" id="vi"}
                            <input type="checkbox" {if in_array($vi.id,$limits)} checked {/if} name="operate_id[]" lay-filter="checkTest2" class="itemClasscheck itemClasscheck_item{$vi.id}  itemClasscheck_2 itemClasscheck{$vi.pid}_child" data-pid="{$vi.pid}" value="{$vi.id}" title="{$vi.title}" lay-skin="primary" >
                          {/volist}  
                        </td>
                    </tr>
                {/volist}

          </tbody>
         </table>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="form-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
            <script src="/static/user/js/jquery.min.js"></script>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <script>
        layui.use(['form', 'jquery'], function () {
            let form = layui.form;
            let $ = layui.jquery;

            form.on('submit(form-save)', function (data) {
                var data = $("#formId");
                postDatai("{:url('admin/roleSave')}?id={$Request.get.id}",data).then(function(res){
                    if (res.code==200) {
                        layer.msg(res.message, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window
                                .name)); //关闭当前页
                            parent.layui.table.reload("tableId");
                        });
                    } else {
                        layer.msg(res.message, {
                            icon: 2,
                            time: 1000
                        });
                    }
                });
                return false;
            });
            if(!$(`.itemClasscheck:not(:checked)`).length){
                        $(".itemxzClasswz_qx").prop("checked",true);  
                    }else{
                        $(".itemxzClasswz_qx").prop("checked",false);  
                    }
                    form.render('checkbox');     
            //全选
            form.on('checkbox(checkall)', function(obj){
                    $('.itemClasscheck_1').prop("checked",obj.elem.checked);
                    $('.itemClasscheck_2').prop("checked",obj.elem.checked);
                    form.render('checkbox');
              });
              //一级选择
              form.on('checkbox(checkTest1)', function(obj){
                    var pid=obj.value;
                    $(`.itemClasscheck${pid}_child`).prop("checked",obj.elem.checked);
                    if( !$(`.itemClasscheck${pid}_child:not(:checked)`).length ){
                            $(`.itemClasscheck_item`+pid).prop("checked",true);
                        }
                    if(!$(`.itemClasscheck:not(:checked)`).length){
                        $(".itemxzClasswz_qx").prop("checked",true);  
                    }else{
                        $(".itemxzClasswz_qx").prop("checked",false);  
                    }
                    form.render('checkbox');
              });
              //二级选择
              form.on('checkbox(checkTest2)', function(obj){
                    var pid=$(obj.elem).data("pid");
                    if(obj.elem.checked){
                        if( !$(`.itemClasscheck${pid}_child:not(:checked)`).length ){
                            $(`.itemClasscheck_item`+pid).prop("checked",true);
                        }
                        if(!$(".itemClasscheck:not(:checked)").length){
                            $(".itemxzClasswz_qx").prop("checked",true); 
                        }
                    }else{
                        $(`.itemClasscheck_item`+pid).prop("checked",false);
                        $(".itemxzClasswz_qx").prop("checked",false);  
                    }
                   
                    form.render('checkbox');
              });

  
        })
        
    </script>
    {include file="base/unitjs"}
</body>

</html>